<template>
<div>
  <div class="noAdress" v-if="!usrName" @click="$router.push({path: 'adress'})">
    <img class='noAdress_img' src="../../images/noAdress.png" />
    <p>填写收货地址</p>
  </div>
  <div class="hasAdress whiteBg" v-if="usrName">
    <div class="hasAdress_tit" style="position: relative;">
      <span class="icon" <i class="icon iconfont icon-location"></i></span>
      <img src="../../images/hasAdress.png" />
      <div class="tit_info">
        <p><i></i><span>收货地址</span></p><span class="info_right" @click="changeRess">更换地址</span></div>
    </div>
    <div class="hasAdress_info">
      <p>收货人：{{usrName}}</p>
      <p>收货电话：{{usrTel}}</p>
      <p>收货地址：{{usrAddress}}</p>
    </div>
  </div>
  <div class="content whiteBg">
    <div class="orderList">
      <div class="order_title">
        <span class="position">{{mchtName}}</span>
        <span class="status">有效期至：{{validatyEnd|endtimeStampt}}</span>
      </div>
      <div class="coupon_order_coupon">

        <div class="couponDiv" style="height: 4.7rem;" :class="{'coupon_orange':Codetypes=='present','coupon_purple':Codetypes=='ticket'}">
          <div class="_num" :class="{'coupon_color_o':Codetypes=='present','coupon_color_p':Codetypes=='ticket'}">Coupon</div>
          <div class="num_price">
            <span>{{denomination}}</span>
          </div>
          <div class="coupontype" v-if="Codetypes=='ticket'">票务</div>
          <div class="coupontype" v-if="Codetypes=='present'">礼品券</div>
          <div class="coupontype" v-if="Codetypes=='cash'">代金券</div>
          <div class="coupontype" v-if="Codetypes=='voucher'">抵用券</div>
        </div>

        <div class="card_info">
          <p class="card_name">{{couponName}}</p>
          <div class="coupon_info_item card_time">
            <p class="star_con">
              <star :couponComScore="comScore"></star>
            </p>
            <p class="info_pad">{{comScore}}条</p>
          </div>
          <p class="card_del"><span>已售出&nbsp;&nbsp;{{soldnum}}</span> &nbsp;&nbsp;
            <span>已使用&nbsp;&nbsp;&nbsp;{{usednum}}
                            </span></p>
        </div>
      </div>
      <div class="order_status_del">
        <div><span class="del_title">使用数量</span>
          <p class="count">
            <span class='coupon_num' @click="jia">+</span>
            <input class='coupon_num' onkeyup="value=value.replace(/[^\d]/g,'')" type="text" v-model="value" />
            <span class='coupon_num' @click="jian">—</span>
          </p>

        </div>
      </div>
    </div>
  </div>
  <div :class="!usrName?firm_btn:addFriendBtn" @click="submitOrder">提交订单</div>
  <!-- 奖励显示弹框 -->
  <reward-modal v-if="shareInfo" @close="hiddenShareInfo" type="use" :money="usrAmt" :nums='nums' returnHistory='true'></reward-modal>
  <!--奖励提醒-->
  <!-- <div class="shadowBox" v-show="shareInfo" @click="hiddenShareInfo"></div>
  <div class="shareInfo" v-show="shareInfo">
    <p class="infoOne"><i class="iconfont icon-shanchu" @click="hiddenShareInfo"></i></p>
    <p class="infoTwo">恭喜你<br />获得{{value}}笔使用奖励金</p>
    <p class="infoThree"><span>{{usrAmt}}<i></i></span><span>总计</span></p>
    <p class="infoFour" @click="hiddenShareInfo">知道啦，退下吧</p>
    <p class="infoFive">使用奖励金已放入您的钱包</p>
  </div> -->
</div>
</template>
<script>
import * as types from '../../vuex/types.js'
import RewardModal from 'src/componentes/global/reward/index.vue'
import {
  mapState
} from 'vuex'
import star from '../../componentes/global/star.vue'
import couponList from '../../componentes/global/couponList.vue'
import couponNum from '../../componentes/global/couponNum.vue'
import * as types1 from '../../vuex/appendType'
import listLoading from '../../componentes/global/listLoading.vue'
import getDate from '../../service/getData'
import {
  Toast,
  Indicator
} from 'mint-ui'
import {
  Storage
} from 'src/utils/storage.js'

export default {
  name: 'firmOrder',
  components: {
    listLoading,
//  cardImg,
    star,
    RewardModal
  },
  data() {
    return {
      orderList: '',
      value: 1,
      mchtName: '',
      couponName: '',
      soldnum: '',
      usednum: '',
      validatyEnd: '',
      denomination: '',
      comNum: '',
      Codetypes: '',
      comScore: '',
      usrTel: '',
      usrAddress: '',
      usrName: '',
      num: '',
      firm_btn: 'firm_btn',
      addFriendBtn: 'addFriendBtn',
      addId: '', //修改接口地址id
      codeArr: [],
      codeArr2: [],
      shareInfo: false,
      usrAmt: 0,
			nums:''//奖励金笔数
    }
  },
  beforeRouteLeave(to, from, next) {

    next()
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
    })
  },
  created: function() {
    var me = this
    me.Codetypes = Storage.get('firmOrder').type
    console.log(String(Storage.get('firmOrder').couponId), Number(Storage.get('firmOrder').mchtId))
    //礼品券详情
    getDate.firmOrder({
      method: 'post',
      data: {
        couponId: String(Storage.get('firmOrder').couponId),
        mchtId: Number(Storage.get('firmOrder').mchtId)
      }
    }).then(function(rep) {
      me.mchtName = rep.content.mchtName
      me.soldnum = rep.content.soldnum
      me.usednum = rep.content.usednum
      me.validatyEnd = rep.content.validatyEnd
      me.denomination = rep.content.denomination
      me.couponName = rep.content.couponName
      me.comNum = rep.content.comNum
      me.comScore = rep.content.comScore
    })
    //地址查询
    getDate.shippingAddress({
      method: 'post',
      data: {
        aoData: '',
        usrId: me.userInfo.usrId
      }
    }).then(function(rep) {
      me.usrTel = rep.content.usrAddressList[rep.content.usrAddressList.length - 1].usrTel
      me.usrAddress = rep.content.usrAddressList[rep.content.usrAddressList.length - 1].usrAddress
      me.usrName = rep.content.usrAddressList[rep.content.usrAddressList.length - 1].usrName
      me.addId = rep.content.usrAddressList[rep.content.usrAddressList.length - 1].addId

      Storage.set('changeRess', {
        inputTel: me.usrTel,
        inputRess: me.usrAddress,
        inputName: me.usrName,
        addId: me.addId
      })
    })

    getDate.findCode({
      method: 'post',
      data: {
        couponId: Storage.get('firmOrder').couponId,
        mchtId: Storage.get('firmOrder').mchtId,
        usrId: me.userInfo.usrId
      }
    }).then(function(rep) {
      console.log(rep)
      if (rep.respCode == '00') {
        me.codeArr = JSON.parse(rep.content).couponNos.split(',')
        console.log(me.codeArr)
        me.num = JSON.parse(rep.content).couponNos.split(',').length
      }
    })
  },
  methods: {
    jia() {
      if (this.value < this.num&&this.value<10) {
        this.value++
      } else {
      	if(this.num>10){
      		 Toast({
          message: "最多可用10张",
          duration: 800
        });
        this.value=1
        return
      	}else{
      		 Toast({
          message: "最多可用" + this.num + "张",
          duration: 800
        });
        return
      	}

      }

    },
    jian() {
      if (this.value <= 1) {
        Toast({
          message: "使用张数不能为0",
          duration: 800
        });
        return
      } else {
        this.value--
      }
    },
    //更改地址
    changeRess() {
      this.$router.push({
        'path': '/adress',
        query: {
          addId: true
        }
      });
    },
    //提交订单
    submitOrder() {
      var me = this
      if(me.value<11){
      	      if (me.value > me.num) {
        Toast({
          message: "请输入有效张数",
          duration: 800
        });
      } else if (!me.usrName) {
        Toast({
          message: "请先填写收货信息",
          duration: 800
        });
      } else {

        for (var i = 0; i < me.value; i++) {

          me.codeArr2.push(me.codeArr[i])

        }
        me.codeArr2 = Array.from(new Set(me.codeArr2)).join(',')
         me.$store.commit('changeState', true)
//      console.log(me.codeArr2, Storage.get('firmOrder').couponId, me.value, Storage.get('firmOrder').mchtId)
        getDate.submitOrder({
          method: 'post',
          data: {
            couNos: me.codeArr2,
            couponId: Storage.get('firmOrder').couponId,
            couponMchtId: Storage.get('firmOrder').mchtId,
            couponNum: me.value,
            mchtId: Storage.get('firmOrder').mchtId,
            receAddress: me.usrAddress,
            receMobile: me.usrTel,
            receName: me.usrName,
            usrId: me.userInfo.usrId
          }
        }).then(function(rep) {
          if (rep.respCode == '00') {
          	 me.$store.commit('changeState', false)
            Toast({
              message: "提交成功",
              duration: 800
            });
            if (!rep.content.usrAmt) {
              me.$router.push({
                path: '/cardList',
                query: {
                  vueRouterHistory: 1
                }
              })
            }
            if (rep.content.usrAmt == 0) { //无奖励机制
              me.$router.replace({
                path: '/cardList',
                query: {
                  vueRouterHistory: 1
                }
              })
            } else { //有奖励机制
              me.usrAmt = rep.content.usrAmt;
              me.shareInfo = true;
              me.nums=me.value
            }
          }else{
          	 me.$store.commit('changeState', false)
          	Toast({
              message: rep.errorInfo,
              duration: 800
            });
            return
          }
        })
      }
      }else{
      	Toast({
              message: '亲,超出了最大的发货数量，一次性最多只能发10张呦!',
              duration: 800
            });
            me.value=1
      }

    },
    hiddenShareInfo() {
      this.shareInfo = false;
      this.$router.replace({
        path: '/cardList',
        query: {
          vueRouterHistory: 1
        }
      })
    }

  }

}
</script>
<style scoped>
.noAdress {
  height: 18.5rem;
  text-align: center;
}

.noAdress_img {
  height: 13rem;
  width: 12.47rem;
  margin-top: 2.75rem;
}

.hasAdress {
  margin-top: .2rem;
  min-height: 13rem;
  margin-bottom: .7rem;
  box-sizing: border-box;
}

.hasAdress_tit {
  height: 3.4rem;
  position: relative;
}

.hasAdress_tit .tit_info {
  position: absolute;
  top: 1.1rem;
  width: 100%
}

.hasAdress_tit .tit_info p {
  position: absolute;
  left: 1.5rem;
  color: #fff;
}

.hasAdress_tit .tit_info .info_right {
  position: absolute;
  right: 1.5rem;
  font-weight: bold;
  color: #333;
}

.hasAdress_tit img {
  width: 8.2rem;
  height: 2.1rem;
  margin-top: .9rem;
}

.hasAdress_info {
  padding: 1.3rem 1.5rem 0 1.5rem;
}

.hasAdress_info p:nth-child(1) {
  color: #333;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 2.4rem;
}

.hasAdress_info p:nth-child(2),
.hasAdress_info p:nth-child(3) {
  color: #666;
  line-height: 2rem
}

.order_title .status {
  color: #666;
}

.order_status_del .count {
  position: absolute;
  right: 0;
  margin-top: .38rem;
}

.order_status_del .coupon_num {
  display: inline-block;
  float: right;
  color: #333;
  font-weight: bold;
  width: 3.66rem;
  background: #f2f2f2;
  border-radius: .1rem;
  height: 2.88rem;
  text-align: center
}

.order_status_del .coupon_num:nth-child(1) {
  font-size: 1.8rem;
  color: #999;
  line-height: 2.88rem;
}

.order_status_del .coupon_num:nth-child(2) {
  margin: 0 .43rem 0 .43rem;
  color: #333;
}

.order_status_del .coupon_num:nth-child(3) {
  font-size: 1.2rem;
  color: #999;
  line-height: 2.88rem;
}

.order_status_del .coupon_num_color {
  color: #666;
}

.coupon_order_coupon {
  border-bottom: 1px solid #f0f0f0;
}

.firm_btn_red {
  color: #ec4e8a
}

.firm_btn {
  height: 3.12rem;
  color: #fff;
  background: #999;
  font-weight: bold;
  text-align: center;
  line-height: 3.12rem;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 1.2rem;
}

/*图片*/

.coupontype {
  position: relative;
  font-family: Arial;
  font-size: .8rem;
  color: white;
}

.num_price span {
  font-size: 1.4rem;
  color: white;
  font-family: Arial;
}

.addFriendBtn {
  height: 3.12rem;
  color: #fff;
  background: #eb4e89;
  font-weight: bold;
  text-align: center;
  line-height: 3.12rem;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 1.2rem;
}

.icon {
  position: absolute;
  top: 1.2rem;
  color: white;
}
</style>
